---
title: Установка Vite или Rollup плагинов
description: Узнайте, как вы можете импортировать данные YAML путём добавления плагина Rollup в свой проект.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro строится поверх Vite и поддерживает плагины Vite и Rollup. Этот рецепт использует плагин Rollup, чтобы добавить функциональность импорта данных из YAML (`.yml`) файла в Astro.

## Рецепт

<Steps>
1. Установите `@rollup/plugin-yaml`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Импортируйте плагин в своем `astro.config.mjs` и добавьте его в массив плагинов Vite:

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```

3. Наконец, вы можете импортировать данные YAML, используя выражение `import`:

    ```js
    import yml from './data.yml';
    ```

    :::note
    Хотя вы можете импортировать данные YAML в своём проекте Astro, ваш редактор кода не будет предоставлять типы для импортируемых данных. Для добавления типов создайте или найдите существующий `*.d.ts` файл в директории `src` вашего проекта и добавьте следующее:
    ```ts title="src/files.d.ts"
    // Укажите расширение файла, который вы хотите импортировать
    declare module "*.yml" {
      const value: any; // При желании добавьте определения типов
      export default value;
    }
    ```
    Это даст вашему редактору возможность предоставлять типы ваших данных YAML.
    :::
</Steps>
